<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">首页</a>
        <a><cite>支付配置</cite></a>
        <a><cite>支付接口类型</cite></a>
        <a><cite>账号模板</cite></a>
    </span>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">支付接口类型</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-row">
                    <div class="layuiAdmin-btns" style="margin-bottom: 10px;">
                        <a class="layui-btn create" data-events="create">新增账号模板</a>
                    </div>
                </div>
                <table class="layui-hide center" id="cList" lay-filter='cList'></table>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['table','util', 'form'], function(){
        var table = layui.table
        ,$ = layui.$
        ,form = layui.form
        ,element = layui.element
        ,view = layui.view
        ,admin = layui.admin;
        var ifTypeCode = layui.router().search.ifTypeCode;

        element.render('breadcrumb', 'breadcrumb');//渲染导航信息

        //标题内容模板
        var tplTitle = function(d){
            return "<a class='layui-btn layui-btn-sm' lay-event='edit'>编辑</a>";
        };

        var tplStatus = function(d){
            var checkedHtml = " recordId='"+d.id+"' ";
            if(d.status == 1) {
                checkedHtml += " checked";
            }
            return '<input type="checkbox" lay-filter="statusSwitch" lay-skin="switch" '+checkedHtml+' lay-text="启用|停用">';
        };
        table.render({
            elem: '#cList'
            ,url: layui.setter.baseUrl + '/config/pay_interface_type/template/list'
            ,where : {access_token: layui.data(layui.setter.tableName).access_token, ifTypeCode : ifTypeCode}
            ,id: 'tableReload'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title: 'ID'}
                ,{field:'passageMchIdTemplate', title: '通道商户ID'}
                ,{field:'ifTypeCode', title: '接口类型代码'}
                ,{field:'templateName',  title: '接口类型名称'}
                ,{field:'status', title: '状态',templet: tplStatus }
                ,{field: 'createTime', title: '创建时间', templet: '<div>{{ layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss") }}</div>'}
                ,{width: 200, title: '操作', templet: tplTitle }
            ]]
            ,page: true
            ,skin: 'line'
        });

        //监听工具条
        table.on('tool(cList)', function(obj){
          var data = obj.data;
          if(obj.event === 'edit'){
              view.xxpayPopup("更新账户模板", "pay_config/pay_interface_type/template/update", {tid: data.id, ifTypeCode: ifTypeCode});
          }
        });


        form.on('switch(statusSwitch)', function(data){

            var updateRecordId = $(data.elem).attr('recordId');
            var updateState = data.elem.checked ? "1" : "0";
            var loadingIndex = layer.load();
            admin.req({
                type: "POST",
                url: layui.setter.baseUrl + '/config/pay_interface_type/template/update',
                data: {id: updateRecordId, status: updateState},
                success: function(res){
                    if(res.code == 0) {
                        table.reload('tableReload');
                    }
                },
                complete:function(){
                    layer.close(loadingIndex);
                }
            });
        });

        // 事件处理
        var events = {
            create: function(othis, type){
                view.xxpayPopup("新增账号模板", "pay_config/pay_interface_type/template/create", {ifTypeCode: ifTypeCode});
            }
        };

        $('.layuiAdmin-btns .layui-btn').on('click', function(){
            var othis = $(this)
                ,thisEvent = othis.data('events')
                ,type = othis.data('type');
            events[thisEvent] && events[thisEvent].call(this, othis, type);
        });

        // 渲染表单
        form.render();

    });
    
</script>
